

<template>
  <view class="Mall4j">
    <!-- 积分明细 -->
    <view class="integral-detail">
      <view class="number-box">
        <image src="/package-member-integralhttps://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/integral-detail-bg1.png" class="bg1" />
        <image src="/package-member-integralhttps://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/integral-detail-bg2.png" class="bg2" />
        <view class="my-integral">
          <view class="number">{{ userInfo.score }}</view>
          <view class="text">{{ i18n.integral }}</view>
        </view>
        <view class="explain" @tap="clikcPop">{{ i18n.integralStrategy }}</view>
      </view>
      <view class="detail-list">
        <view v-for="(item, logId) in scoreDetails" :key="logId" class="item">
          <view class="text-box">
            <!-- source来源 0注册送积分 1. 购物 2.会员等级提升加积分 3.签到加积分 4购物抵扣使用积分 5积分过期 6充值获赠 -->
            <!-- ioType出入类型 0=支出 1=收入 -->
            <view v-if="item.source == 0" class="tit">{{ i18n.registerEarnPoints }}</view>
            <view v-if="item.source == 1 && item.ioType == 1" class="tit">{{ i18n.rewardPointsGoods }}</view>
            <view v-if="item.source == 1 && item.ioType == 0" class="tit">{{ i18n.refundShopping }}</view>
            <view v-if="item.source == 2" class="tit">{{ i18n.pointsLevelPromotion }}</view>
            <view v-if="item.source == 3" class="tit">{{ i18n.signGetPoints }}</view>
            <view v-if="item.source == 4 && item.ioType == 1" class="tit">{{ i18n.refundGoodsPoints }}</view>
            <view v-if="item.source == 4 && item.ioType == 0" class="tit">{{ i18n.purchaseGoodsPoints }}</view>
            <view v-if="item.source == 5" class="tit">{{ i18n.pointsExpired }}</view>
            <view v-if="item.source == 6" class="tit">{{ i18n.rechargeGetPoints }}</view>
            <view v-if="item.source == 7" class="tit">{{ i18n.platformModification }}</view>
            <text v-if="item.isLock" style="font-size: 26rpx; color: #999;">({{ i18n.pointsInLock }})</text>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <view :class="'score ' + (item.ioType == 0 ? 'reduce':'add')">{{ item.ioType == 0 ? "-":"+" }}{{ item.score }}</view>
        </view>
      </view>
      <view v-if="scoreDetails.length > 10 && isAll" class="loadall">{{ i18n.endTips }}</view>
      <!-- 空 -->
      <empty v-if="scoreDetails.length==0" />
    </view>

    <!-- 积分攻略弹框 -->
    <view v-if="showPop" class="score-strategy">
      <view class="mask" />
      <view class="explain-card">
        <view class="content-wrap">
          <view class="cont-title">{{ i18n.integralStrategy }}</view>
          <image class="close-icon" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/close.png" @tap="clikcPop" />
          <view class="cont-det">
            <rich-text :nodes="scoreExplain.paramValue" />
          </view>
        </view>
      </view>
    </view>
    <!-- /积分攻略弹框 -->

    <!-- /积分明细 -->
  </view>
</template>

<script>
// pages/integral-detail/integral-detail.js
var http = require('@/utils/http.js')
import empty from '@/components/empty-tips/index.vue'

export default {

  components: {
    empty
  },
  data () {
    return {
      pages: 0,
      current: 1,
      size: 10,
      scoreDetails: [],
      // 积分明细列表
      isAll: false,
      userInfo: {},
      // 用户积分等级信息
      scoreExplain: {},
      // 积分说明
      showPop: false // 攻略弹框显隐
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // document.title = this.i18n.theIntegralSubsidiary
    uni.setNavigationBarTitle({
      title: this.i18n.theIntegralSubsidiary
    })

    // 请求积分明细
    this.getScoreDetails() // 获取用户积分等级信息

    this.getUserScore() // 积分攻略

    this.getScoreExplain()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getNextPage()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 获取用户积分等级信息
     */
    getUserScore: function () {
      var param = {
        url: '/p/user/userInfo',
        method: 'GET',
        data: {
          current: this.current,
          size: 10
        },
        callBack: res => {
          this.setData({
            userInfo: res
          })
        }
      }
      http.request(param)
    },

    /**
     * 请求积分明细
     */
    getScoreDetails: function () {
      var param = {
        url: '/p/score/page',
        method: 'GET',
        data: {
          current: this.current,
          size: 10
        },
        callBack: res => {
          this.scoreDetails = res.current == 1 ? res.records : this.scoreDetails.concat(res.records)
          this.pages = res.pages
          this.current = res.current
        }
      }
      http.request(param)
    },

    /**
     * 触底加载下一页
     */
    getNextPage () {
      if (this.pages > this.current) {
        this.setData({
          current: this.current + 1
        })
        this.getScoreDetails()
      } else {
        this.setData({
          isAll: true
        })
      }
    },

    /**
     * 积分攻略
     */
    getScoreExplain: function () {
      var param = {
        url: '/p/score/getScoreQuestion',
        method: 'GET',
        data: {},
        callBack: res => {
          this.setData({
            scoreExplain: res
          })
        }
      }
      http.request(param)
    },

    /**
     * 积分攻略弹框显隐
     */
    clikcPop: function () {
      var showPop = !this.showPop
      this.setData({
        showPop
      })
    }
  }
}
</script>
<style>
@import "./integral-detail.css";
</style>
